<template>
  <div class="page">
    <div class="path"><span class="level-1">订单管理</span> > <span class="level-2">订单列表</span></div>
    <div class="mods">
      <div class="mod-1">
        <span class="name">订单数：</span><span class="num">{{info.count}}</span>
      </div>
      <div class="mod-2">
        <span class="name">返款合计：</span><span class="num">{{info.refunds}}</span>
      </div>
    </div>
    <div class="search">
      <div>
        <span>淘宝单号：</span>
        <Input v-model="params.order_number" placeholder="淘宝单号"/>
      </div>
      <div>
        <span>淘宝会员名：</span>
        <Input v-model="params.taobao_zhanghao" placeholder="淘宝会员名"/>
      </div>
      <div>
        <span>用户id：</span>
        <Input v-model="params.uid" placeholder="用户id"/>
      </div>
      <div>
        <span>订单状态：</span>
        <Select v-model="params.status" placeholder="订单状态" clearable>
          <Option v-for="item in orderStatus" :value="item.value">{{item.text}}</Option>
        </Select>
      </div>
      <div>
        <span>任务id：</span>
        <Input v-model="params.tid" placeholder="任务id"/>
      </div>
      <div>
        <span>应付区间：</span>
        <Input v-model="params.min_price" class="numRange" placeholder="应付大于"/> ~
        <Input v-model="params.max_price" class="numRange" placeholder="应付小于"/>
      </div>
      <div>
        <span>手机号：</span>
        <Input v-model="params.mobile" placeholder="手机号"/>
      </div>
      <div class="btns">
        <Button type="primary" @click="query">查询</Button>
        <Button @click="reset">重置</Button>
        <Button @click="exportOrder">导出订单</Button>
      </div>
    </div>
    <DataList class="data-list"
              :dataHeight="dataHeight"
              :columns="columns"
              :data="data"
              :total='total'
              :pageSize="pageSize"
              @pageChange="getData">
    </DataList>
    <Modal v-model="showDetail" :width="1000" title="订单详情">
      <OrderDetailModal :row="row"/>
    </Modal>
  </div>
</template>
<script>
import DataList from './DataList'
import {listOrder} from '@/api/api-list'
import qs from 'qs'
import OrderDetailModal from './OrderDetailModal'
export default {
  name: 'order',
  data () {
    return {
      columns: [
        {
          title: '订单ID',
          key: 'id',
          width: 80,
          fixed: 'left'
        },
        {
          title: '任务ID',
          key: 'tid',
          width: 80
        },
        {
          title: '礼品ID',
          key: 'gift_id',
          width: 80
        },
        {
          title: '订单号',
          key: 'orderid',
          width: 160
        },
        {
          title: '淘宝订单号',
          key: 'order_number',
          width: 160
        },
        {
          title: '用户ID',
          key: 'uid',
          width: 90,
          align: 'center'
        },
        {
          title: '淘宝用户名',
          key: 'taobao_zhanghao',
          width: 120,
          align: 'center'
        },
        {
          title: '手机号',
          key: 'mobile',
          width: 160
        },
        {
          title: '商家id',
          key: 'bid',
          width: 80
        },
        {
          title: '店铺',
          key: 'storeName',
          width: 160
        },
        {
          title: '订单状态',
          key: 'status',
          width: 200
        },
        {
          title: '创建时间',
          key: 'create_time',
          width: 170
        },
        {
          title: '应付金额',
          key: 'amount',
          width: 100
        },
        {
          title: '实付金额',
          key: 'payment',
          width: 100
        },
        {
          title: '商家成本',
          key: 'goods_price',
          width: 100
        },
        {
          title: '备注',
          key: 'remarks'
        },
        {
          title: '代发工单ID',
          key: 'replace_sid',
          width: 110
        },
        {
          title: '操作',
          fixed: 'right',
          key: 'action',
          width: 70,
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('span', {
                style: {
                  color: '#2d8cf0',
                  cursor: 'pointer'
                },
                on: {
                  click: () => {
                    this.view(params.row, params.index)
                  }
                }
              }, '详情')
            ])
          }
        }
      ],
      data: [],
      params: {
        order_number: '', // 淘宝单号
        taobao_zhanghao: '', // 淘宝会员名
        uid: '', // 用户id
        status: '', // 订单状态0=未付款(待操作)1=已付款(待审核)2=已审核(待发货)3=已发货(待评价)4=待返款(已评价)5=已完成(已返款)6=已失效(到时间未操作)7=主动放弃8=审核未通过9=用户删除
        tid: this.tid, // 任务id
        min_price: '', // 应付区间 最小值
        max_price: '', // 应付区间 最大值
        mobile: ''// 用户手机号

      },
      total: 0,
      pageSize: 10,
      info: {
        count: 0,
        refunds: 0
      },
      orderStatus: [
        {
          value: '0',
          text: '未付款(待操作)'
        },
        {
          value: '1',
          text: '已付款(待审核)'
        },
        {
          value: '2',
          text: '已审核(待发货)'
        },
        {
          value: '3',
          text: '已发货(待评价)'
        },
        {
          value: '4',
          text: '待返款(已评价)'
        },
        {
          value: '5',
          text: '已完成(已返款)'
        },
        {
          value: '6',
          text: '已失效(到时间未操作)'
        },
        {
          value: '7',
          text: '主动放弃'
        },
        {
          value: '8',
          text: '审核未通过'
        },
        {
          value: '9',
          text: '用户删除'
        }
      ], // 订单状态
      row: {},
      showDetail: false,
      dataHeight: 0
    }
  },
  components: {OrderDetailModal, DataList},
  props: {tid: String},
  mounted () {
    this.getData(1)
    this.dataHeight = document.getElementById('data-list').clientHeight
  },
  methods: {
    view (row) {
      this.row = row
      this.showDetail = true
    },
    getData (page) {
      listOrder({...this.params, p: page}).then(({data}) => {
        this.data = data ? data.list : []
        this.total = data.total || 0
        this.pageSize = data.pageSize
        this.info = data.info || {}
      })
    },
    query () {
      this.getData(1)
    },
    exportOrder () {
      window.open(`/branch/Order/orderlist?branch_id=7&export=1&${qs.stringify(this.params)}`, '_self')
    },
    reset () {
      for (const key in this.params) {
        this.params[key] = ''
      }
      this.getData(1)
    }
  }
}
</script>
<style scoped lang="less">
  @import "./style/page";
</style>
